<!-- 树状选择器 -->
<template>
  <el-tree-select
    :options="options"
    :props="treeProps"
    :multiple="multiple"
    :check-strictly="true"
    v-model="restValues"
    placeholder="选择知识点"
    class="filter-item"/>
</template>

<script>
import { fetchTree } from '@/api/sys/kp/kp'
import ElTreeSelect from '@/components/ElTreeSelect/index.vue'
export default {
  name: 'KeyPointTreeSelect',
  components: { ElTreeSelect },
  props: {
    value: {
      type: Array | String
    },
    multiple: {
      type: Boolean,
      default: true
    },
    root: {
      type: String
    }
  },
  data() {
    return {
      treeProps: {
        value: 'pointCode',
        label: 'pointName',
        children: 'children'
      },
      options: [],
      restValues: null,
      query: {
        pointRoot: null
      }
    }
  },
  watch: {
    value(val) {
      this.restValues = val
    },
    restValues(val) {
      this.$emit('input', val)
    },
    root(val) {
      this.query.pointRoot = val
      this.fetchData()
    }
  },
  created() {
    this.restValues = this.value
    this.fetchData()
  },
  methods: {
    fetchData() {
      fetchTree(this.query).then(res => {
        this.options = res.data
      })
    }
  }
}
</script>
